
<template>
    <div class="app-container">
        <a-button @click="oppen">井弹窗</a-button>

        <!-- 电缆对话框 -->
        <AntdConfirmModal title="井信息" ref="modalRef" width="800px" :keepSlot="false" @confirm="submitItem">

            <a-row>
                <a-input-search v-model:value="searchKey" placeholder="请输入井信息" style="width: 200px; margin-bottom: 10px;"
                    @search="onSearch()" />
            </a-row>

            <a-table :rowKey="(record) => record.wellId" :row-selection="rowSelection" :dataSource="dataSource" :columns="columns" bordered>
                <template #bodyCell="{ column, text, record }">
                    {{ text }}
                </template>
            </a-table>
        </AntdConfirmModal>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList } from "@/api/well/well.js";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
// 定义表格列配置
const columns = [
    {
        title: '井ID',
        dataIndex: 'wellId',
        key: 'wellId',
    },
    {
        title: '井名称',
        dataIndex: 'wellName',
        key: 'wellName',
    },
    {
        title: '纬度',
        dataIndex: 'latitude',
        key: 'latitude',
    },
    {
        title: '经度',
        dataIndex: 'longitude',
        key: 'longitude',
    },
    {
        title: '省份',
        dataIndex: 'province',
        key: 'province',
    },
    {
        title: '市',
        dataIndex: 'city',
        key: 'city',
    },
    {
        title: '区',
        dataIndex: 'county',
        key: 'county',
    },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.wellName === 'Disabled Well',
    // Column configuration not to be checked
    wellName: record.wellName,
  }),
};

function oppen() {
    modalRef.value.openModal()
}

/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
    });
}
getList();

/** 搜索按钮操作 */
function onSearch() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}

/** 提交按钮 */
function submitItem() {

}
</script>
  